<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Employee</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/main-cs.css">
</head>

<body>
<!--Content--->
<%@ include file="_header.jsp" %>
<div id="main">
	<ol class="breadcrumb">
  		<li><a class="management" style="cursor: pointer;">Home</a></li>
  		<li><a class="management" style="cursor: pointer;">Manage Employee</a></li>
  		<li class="active">Employee List</li>
	</ol>
    <div id="panel1">
    	<div class="panel panel-primary">
        	<div class="panel-heading">
            	<p style="color:#FFF; font-weight:bold; font-size:20px">Add Employee</p>
            </div>
            <div class="panel-body">
            <div id="message">
            	<h1 style="text-align: center;">Error</h1>
            	<h2 style="text-align: center;">Please click <b><i><a id="continue" style="cursor: pointer;">CONTINUE</a></i></b> to fix error</h2>
            </div>
            <div style="display: none;" id="fixForm">
              <form class="form-horizontal" id="formAddEmployee" name="formAddEmployee"
								method="post" action="AddEmployeeController.do?action=save"
								enctype="multipart/form-data" onsubmit="return validateData()">
                <table class="table" style="margin: 0 auto;">
                	<tr>
                		<td></td>
                		<td colspan="2"><h4><b>Notice: <i style="color: blue;">Please choose image file again!</i></b></h4></td>
                	</tr>
                	<tr>
                   	 <td></td>
                   	 <td colspan="2">
                    	<button class="btn btn-info col-md-2" type="submit" id="save">Save</button>
                        <button class="btn btn-info col-md-2" type="button" id="cancel" style="margin-left: 5px">Cancel</button>
                    	</td>
					</tr>
                    <tr>
                        <td width="16%" valign="middle"><img src="image/none.jpg" width="150" height="150" id="image"/></td>
                        <td width="42%">
                        	<table class="table">
                            	<tr>
                                	<td><label>EmployeeID</label></td>
                                    <td><input type="text" id="empID" name="empID" readonly class="form-control" value="${AddEmployes.employee.employeeID }"/></td>
                                </tr>
                                <tr>
                                	<td><label>First Name<b style="color:#F00">*</b></label></td>
                                    <td><input type="text" class="form-control" id="empFirstName" name="empFirstName" value="${AddEmployes.employee.firstName }"/><label id="errorFirstName" style="display:none">Please enter first name</label></td>
                                </tr>
                                <tr>
                                	<td><label>Birth Date</label></td>
                                    <td><input type="date" class="form-control" id="empBirthDate" name="empBirthDate" value="${AddEmployes.employee.birthdate }"/></td>
                                </tr>
                                <tr>
                                	<td><label>Nationality</label></td>
                                    <td><select id="empNationality" name="empNationality" class="form-control">
                                    	<option value="Mr">Mr</option>
                                        <option value="Mrs">Mrs</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label>NaviteLand</label></td>
                                    <td><textarea id="empNativeLand" name="empNativeLand" class="form-control">${AddEmployes.employee.naviteLand }</textarea></td>
                                </tr>
                                <tr>
                                	<td><label>Email<b style="color:#F00">*</b></label></td>
                                    <td><input type="text" class="form-control" id="empEmail" name="empEmail" value="${AddEmployes.employee.email }"/><label id="errorEmail" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label>ID Card<b style="color:#F00">*</b></label></td>
                                    <td><input type="text" class="form-control" id="empIDCard" name="empIDCard" value="${AddEmployes.employee.indentityCard }"/><label id="errorIDCard" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label>Literacy</label></td>
                                    <td><select id="empLiteracy" name="empLiteracy" class="form-control">
                                    	<option value="0">--Select Literacy--</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label>Department<b style="color:#F00">*</b></label></td>
                                    <td><select id="empDepartment" name="empDepartment" class="form-control">
                                    	<option value="0">--Select Department--</option>
                                    </select><label id="errorDepartment" style="display:none">Please select department</label></td>
                                </tr>
                                <tr>
                                	<td><label>Image</label></td>
                                    <td><input type="file" class="form-control" id="empImage" name="empImage" onchange="onFileSelected(event)"/></td>
                                </tr>
                                
                            </table>
                        </td>
                        <td width="42%">
                        	<table class="table">
                            	<tr>
                                	<td><label>Title</label></td>
                                    <td><select id="empTitle" name="empTitle" class="form-control">
                                    	<option value="Mr">Mr</option>
                                        <option value="Mrs">Mrs</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label>Last Name<b style="color:#F00">*</b></label></td>
                                    <td><input type="text" class="form-control" id="empLastName" name="empLastName" value="${AddEmployes.employee.lastName }"/><label id="errorLastName" style="display:none">Please enter last name</label></td>
                                </tr>
                                <tr>
                                	<td><label>Gender</label></td>
                                    <td><select id="empGender" name="empGender" class="form-control">
                                    	<option value="true">Male</option>
                                        <option value="false">Felmale</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label>Marriage</label></td>
                                    <td><select id="empMarital" name="empMarital" class="form-control">
                                    	<option value="true">Yes</option>
                                        <option value="false" selected="selected">No</option>
                                    </select></td>
                                </tr>
                                <tr>
                                	<td><label>Address</label></td>
                                    <td><textarea id="empCurrentAddress" name="empCurrentAddress" class="form-control">${AddEmployes.employee.currentAddress }</textarea></td>
                                </tr>
                                <tr>
                                	<td><label>Phone<b style="color:#F00">*</b></label></td>
                                    <td><input type="text" class="form-control" id="empPhone" name="empPhone" value="${AddEmployes.employee.phone }"/><label id="errorPhone" style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label>Bank<b style="color:#F00">*</b></label></td>
                                    <td><select id="empBank" name="empBank" class="form-control" >
                                    	<option value="0">--Select Bank--</option>
                                    </select><label id="errorBank" style="display:none">Please select bank</label></td>
                                </tr>
                                <tr>
                                	<td><label>Brank Bank<b style="color:#F00">*</b></label></td>
                                    <td><select id="empBrandBank" name="empBrandBank" class="form-control">
                                    	<option value="0">--Select Brand Bank--</option>
                                    </select><label id="errorBrandBank" style="display:none">Please select brand bank</label></td>
                                </tr>
                                <tr>
                                	<td><label>Account<b style="color:#F00">*</b></label></td>
                                    <td><input type="text" class="form-control" id="empAccountBank" name="empAccountBank" value="${AddEmployes.employee.accountBank }"/><label id="errorAccount"  style="display:none"></label></td>
                                </tr>
                                <tr>
                                	<td><label>Office<b style="color:#F00">*</b></label></td>
                                    <td><select id="empOffice" name="empOffice" class="form-control">
                                    	<option value="0">--Select Office--</option>
                                    </select><label id="errorOffice" style="display:none">Please select office</label></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
             </form>
             </div>
    	 </div><!-- end panel-body-->
        </div><!-- end panel primary-->
    </div><!-- end panel1-->
</div><!-- end main-->
<%@include file="_footer.jsp" %>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootbox.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
	  function onFileSelected(event) {
		  if(checkExtendImageFile()){
	    	  var selectedFile = event.target.files[0];
	    	  var reader = new FileReader();
	    	  var imgtag = document.getElementById("image");
	    	  imgtag.title = selectedFile.name;
	    	  reader.onload = function(event) {
	    	  	imgtag.src = event.target.result;
	    	  };
	    	  reader.readAsDataURL(selectedFile);   
		  }
    }
	$(document).ready(function(){
		$.ajax({
			url:"AddEmployeeController.do?action=getAdd",
			type:"POST",
			success:function(data){
				loadAdd(data);
				displayError();
			},
			error:function(data){
				
			}
		});
	});
	
	function loadAdd(data){
		var json = data.split('~');
		loadBank(json[0]);
		loadOffice(json[1]);
		loadNationality(json[2]);
		loadLiteracy(json[3]);
		loadDepartment(json[4]);
	}
	
	function loadBank(data){
		var json = JSON.parse(data);
		$("#empBank").empty();
		$("#empBank").append("<option value='0'>--Select Bank--</option>");
		for(i = 0; i < json.BankList.length; i++){
			$("#empBank").append("<option value="+json.BankList[i].BankID+">"+json.BankList[i].BankName+"</option>");
		}
		var brankID = ${AddEmployes.employee.bank.bankID };
		$("#empBank").val(brankID);
		$.ajax({
			url:"AddEmployeeController.do?action=getBrandBank&bankID="+$("#empBank option:selected").val(),
			type:"POST",
			datatype:'json',
			success: function(data){
				$("#empBrandBank").prop("disabled", false);
				var json = JSON.parse(data);
				$("#empBrandBank").empty();
				$("#empBrandBank").append("<option value='0'>--Select Brand Bank--</option>");
				for(i = 0; i < json.BrandBankList.length; i++){
					$("#empBrandBank").append("<option value="+json.BrandBankList[i].BrandBankID+">"+json.BrandBankList[i].BrandBankName+"</option>");
				}
				var brandID = ${AddEmployes.employee.brandBank.brandID };
				$("#empBrandBank").val(brandID);
			},
			error:function(){
				
			}
		});
	}
	
	function loadOffice(data){
		var json = JSON.parse(data);
		$("#empOffice").empty();
		$("#empOffice").append("<option value='0'>--Select Office--</option>");
		for(i = 0; i < json.OfficeList.length; i++){
			$("#empOffice").append("<option value="+json.OfficeList[i].OfficeID+">"+json.OfficeList[i].OfficeName+"</option>");
		}
		var officeID = ${AddEmployes.employee.office.officeID }; 
		$("#empOffice").val(officeID);
	}
	
	function loadNationality(data){
		var json = JSON.parse(data);
		$("#empNationality").empty();
		$("#empNationality").append("<option value='0'>--Select Nationality--</option>");
		for(i = 0; i < json.NationalityList.length; i++){
			$("#empNationality").append("<option value="+json.NationalityList[i].NationalityID+">"+json.NationalityList[i].NationalityName+"</option>");
		}
		var nationalityID = ${AddEmployes.nationality };
		$("#empNationality").val(nationalityID);
	}
	
	function loadDepartment(data){
		var json = JSON.parse(data);
		$("#empDepartment").empty();
		$("#empDepartment").append("<option value='0'>--Select Department--</option>");
		for(i = 0; i < json.DeptList.length; i++){
			$("#empDepartment").append("<option value="+json.DeptList[i].DeptID+">"+json.DeptList[i].DeptName+"</option>");
		}
		var deptID = ${AddEmployes.employee.department.deptID };
		$("#empDepartment").val(deptID);
	}
	
	function loadLiteracy(data){
		var json = JSON.parse(data);
		$("#empLiteracy").empty();
		$("#empLiteracy").append("<option value='0'>--Select Literacy--</option>");
		for(i = 0; i < json.LiteracyList.length; i++){
			$("#empLiteracy").append("<option value="+json.LiteracyList[i].LiteracyID+">"+json.LiteracyList[i].LiteracyName+"</option>");
		}
		var literacyID = ${AddEmployes.literacy };
		$("#empLiteracy").val(literacyID);
	}
	
	$("#empBank").change(function(){
		$.ajax({
			url:"AddEmployeeController.do?action=getBrandBank&bankID="+$("#empBank option:selected").val(),
			type:"POST",
			datatype:'json',
			success: function(data){
				$("#empBrandBank").prop("disabled", false);
				var json = JSON.parse(data);
				$("#empBrandBank").empty();
				$("#empBrandBank").append("<option value='0'>--Select Brand Bank--</option>");
				for(i = 0; i < json.BrandBankList.length; i++){
					$("#empBrandBank").append("<option value="+json.BrandBankList[i].BrandBankID+">"+json.BrandBankList[i].BrandBankName+"</option>");
				}
			},
			error:function(){
				
			}
		});
	});
	
	function validateData(){
		var flag = true;
		if($("#empFirstName").val().trim() == ''){
			$("#empFirstName").css("border-color", "red");
			$("#errorFirstName").css("color", "red");
			$("#errorFirstName").css("display", "");
			flag = false;
		}else{
			$("#empFirstName").css("border-color", "");
			$("#errorFirstName").css("display", "none");
		}
		
		if($("#empLastName").val().trim() == ''){
			$("#empLastName").css("border-color", "red");
			$("#errorLastName").css("color", "red");
			$("#errorLastName").css("display", "");
			flag = false;
		}else{
			$("#empLastName").css("border-color", "");
			$("#errorLastName").css("display", "none");
		}
		
		if($("#empEmail").val().trim()== '' || !validateEmail($("#empEmail").val().trim())){
			$("#empEmail").css("border-color", "red");
			$("#errorEmail").text("Not enter or not correct format");
			$("#errorEmail").css("color", "red");
			$("#errorEmail").css("display", "");
			flag = false;
		}else{
			$("#errorEmail").text("");
			$("#empEmail").css("border-color", "");
			$("#errorEmail").css("display", "none");
		}
		
		if($("#empPhone").val().trim() =='' || !isNumeric($("#empPhone").val()) 
				|| $("#empPhone").val().trim().length > 11 
				|| $("#empPhone").val().trim().length < 10){
			$("#empPhone").css("border-color", "red");
			$("#errorPhone").text("Not enter or must 10-11 numbers");
			$("#errorPhone").css("color", "red");
			$("#errorPhone").css("display", "");
			flag = false;
		}else{
			$("#errorPhone").text("");
			$("#empPhone").css("border-color", "");
			$("#errorPhone").css("display", "none");
		}
		
		if($("#empIDCard").val().trim() == '' || !isNumeric($("#empIDCard").val()) 
				|| $("#empIDCard").val().trim().length > 9
				|| $("#empIDCard").val().trim().length < 9){
			$("#empIDCard").css("border-color", "red");
			$("#errorIDCard").text("Not enter or must 9 numbers");
			$("#errorIDCard").css("color", "red");
			$("#errorIDCard").css("display", "");
			flag = false;
		}else{
			$("#errorIDCard").text("");
			$("#empIDCard").css("border-color", "");
			$("#errorIDCard").css("display", "none");
		}
		
		if($("#empBank option:selected").val() == '0'){
			$("#empBank").css("border-color", "red");
			$("#errorBank").css("color", "red");
			$("#errorBank").css("display", "");
			flag = false;
		}else{
			$("#empBank").css("border-color", "");
			$("#errorBank").css("display", "none");
		}
		
		if($("#empBrandBank option:selected").val() == '0'){
			$("#empBrandBank").css("border-color", "red");
			$("#errorBrandBank").css("color", "red");
			$("#errorBrandBank").css("display", "");
			flag = false;
		}else{
			$("#empBrandBank").css("border-color", "");
			$("#errorBrandBank").css("display", "none");
		}
		
		if($("#empAccountBank").val().trim() == ''){
			$("#empAccountBank").css("border-color", "red");
			$("#errorAccount").text("Please enter account bank");
			$("#errorAccount").css("color", "red");
			$("#errorAccount").css("display", "");
			flag = false;
		}else{
			$("#errorAccount").text("");
			$("#empAccountBank").css("border-color", "");
			$("#errorAccount").css("display", "none");
		}
		
		if($("#empDepartment option:selected").val() == '0'){
			$("#empDepartment").css("border-color", "red");
			$("#errorDepartment").css("color", "red");
			$("#errorDepartment").css("display", "");
			flag = false;
		}else{
			$("#empDepartment").css("border-color", "");
			$("#errorDepartment").css("display", "none");
		}
		
		if($("#empOffice option:selected").val() == '0'){
			$("#empOffice").css("border-color", "red");
			$("#errorOffice").css("color", "red");
			$("#errorOffice").css("display", "");
			flag = false;
		}else{
			$("#empOffice").css("border-color", "");
			$("#errorOffice").css("display", "none");
		}
		
		if(!checkExtendImageFile()){
			$("#empImage").css("border-color", "red");
			$("#errorImage").css("color", "red");
			$("#errorImage").css("display", "");
			flag = false;
		}else{
			$("#empImage").css("border-color", "");
			$("#errorImage").css("display", "none");
		}
		
		return flag;
	}
	
	function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }
	
	function isNumeric(number){
	    var re = /^-{0,1}\d*\.{0,1}\d+$/;
	    return re.test(number);
	}
	
	$("#cancel").click(function(){
		window.location.replace("EmployeeController.do");
	});
	
	$("#continue").click(function(){
		$("#message").css("display", "none");
		$("#fixForm").css("display", "");
	});
	
	function displayError(){
		var email = ${AddEmployes.errorEmail};
		var phone = ${AddEmployes.errorPhone};
		var idCard = ${AddEmployes.errorIDCard};
		var account = ${AddEmployes.errorAccountBank};
		if(email){
			$("#errorEmail").text("");
			$("#errorEmail").text("Email is exited");
			$("#empEmail").css("border-color", "red");
			$("#errorEmail").css("display", "");
			$("#errorEmail").css("color", "red");
		}
		
		if(phone){
			$("#errorPhone").text("");
			$("#errorPhone").text("Phone is exited");
			$("#empPhone").css("border-color", "red");
			$("#errorPhone").css("display", "");
			$("#errorPhone").css("color", "red");
		}
		
		if(idCard){
			$("#errorIDCard").text("");
			$("#errorIDCard").text("ID card is exited");
			$("#empIDCard").css("border-color", "red");
			$("#errorIDCard").css("display", "");
			$("#errorIDCard").css("color", "red");
		}
		
		if(account){
			$("#errorAccount").text("");
			$("#errorAccount").text("Account bank is exited");
			$("#empAccount").css("border-color", "red");
			$("#errorAccount").css("display", "");
			$("#errorAccount").css("color", "red");
		}
	}
	
	function checkExtendImageFile(){
		var extend = $("#empImage").val().substring($("#empImage").val().length -3); //Chrome
		if(extend.toLowerCase() == 'jpg'){
			return true;
		}else if(extend.toLowerCase() == 'png'){
			return true;
		}
		return false;
	}
	
	$(".management").click(function(){
		window.location.replace("EmployeeController.do");
	});
	
	$("#signout").click(function(){
		$.ajax({
			url:"LoginController?action=false",
			type:"POST",
			success:function(){
				window.location.replace("LoginController");
			}
		});
	});
</script>
</html>
